<div class="control-group vis-option-type-select">
    <label class="control-label">
        {@html label}
    </label>

    <div class="controls form-inline {disabled? 'disabled' :''}">
        <BaseDropdown>
            <span slot="button">
                <div class="btn-group">
                    <button class="btn dropdown-toggle">
                        {@html currentLabel}
                        <span class="caret"></span>
                    </button>
                </div>
            </span>
            <span slot="content">
                <ul class="dropdown-menu" style="display: block">
                    {#if options.length} {#each options as opt}
                    <li class="{value==opt.value?'selected':''}">
                        <a on:click="select(event, opt)" href="#/{opt.value}">{@html opt.label}</a>
                    </li>
                    {/each} {/if}
                </ul>
            </span>
        </BaseDropdown>
    </div>
</div>

<style type="text/css">
    li.selected {
        background: #18a1cd33;
    }
    .dropdown-toggle {
        background: white;
    }
    span.caret {
        margin-left: 5px;
    }
    .dropdown-menu {
        top: auto !important;
        left: auto !important;
    }
</style>

<script type="text/javascript">
    import BaseDropdown from './BaseDropdown.html';

    export default {
        components: { BaseDropdown },
        data() {
            return {
                forcePlaceholder: false,
                disabled: false,
                width: 'auto',
                options: [],
                optgroups: [],
                placeholder: '(select an item)'
            };
        },
        computed: {
            currentLabel({ value, options, placeholder, forcePlaceholder }) {
                if (!forcePlaceholder) {
                    for (let i = 0; i < options.length; i++) {
                        if (options[i].value === value) return options[i].label;
                    }
                }
                return `<span style="color:#999;font-size:12px;">${placeholder}</span>`;
            }
        },
        methods: {
            select(event, opt) {
                event.preventDefault();
                this.set({ value: opt.value });
                this.fire('change', opt.value);
            }
        }
    };
</script>
